<template>
	<a-drawer
		v-model:open="open"
		title="测试defineModel"
		width="400"
		:footer-style="{ textAlign: 'right' }"
		@close="onClose"
		:headerStyle="{ display: 'block', padding: '8px 24px' }"
		v-bind="$attrs"
	>
		<template #extra>
			<div>11111qweq</div>
		</template>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<p>111111</p>
		<template #footer>
			<a-button
				class="mr-8"
				@click="onClose"
				>Cancel</a-button
			>
			<a-button
				type="primary"
				@click="onClose"
				>Submit</a-button
			>
		</template>
	</a-drawer>
</template>

<script setup lang="ts">
const open = defineModel<boolean>({ default: false, required: true })
const onClose = () => (open.value = false)
</script>
